﻿
@{
    ViewBag.Title = "编辑文章";
    Layout = "~/Views/Shared/_Member.cshtml";
}

<div class="row p10 bcolor" style="overflow:auto;">
    <div class="layui-col-md11 pt30">
        <form class="layui-form" id="dataForm">
            <div class="layui-form-item layui-hide">
                <label class="layui-form-label">专题ID</label>
                <div class="layui-input-block">
                    <input type="text" name="SpecialID" id="SpecialID" class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <label class="layui-form-label">文章ID</label>
                <div class="layui-input-block">
                    <input type="text" name="ID" id="ID" class="layui-input" value="@ViewBag.ArticleID">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">专题封面</label>
                <div class="layui-input-inline">
                    <input type="text" name="Img" id="Img" class="layui-input layui-hide" value="">
                    <img src="" id="imgDisplay" alt="图片" style="width:190px;height:120px" onerror="imageError(event)" />
                </div>
                <div class="layui-form-mid layui-word-aux"><a href="javascript:void(0)" class="href" onclick="javascript: { open_cover(); }">编辑封面</a></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文章标题</label>
                <div class="layui-input-block">
                    <input type="text" name="Title" placeholder="请输入文章标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">知识分类</label>
                <div class="layui-input-inline">
                    <select class="display-form-select" name="ClassifyID" id="ClassifyID"></select>
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文章密码</label>
                <div class="layui-input-inline">
                    <input type="text" name="Password" placeholder="请输入文章密码" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">如需加密文章请填写密码</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">转载来源</label>
                <div class="layui-input-inline">
                    <input type="text" name="Source" placeholder="请输入转载来源" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">如是转载文章请填写此项</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">来源地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="SourceUrl" placeholder="请输入来源地址" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">如有源文章地址请填写此项</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">允许回复</label>
                <div class="layui-input-inline">
                    <select class="display-form-select" name="IsReply" id="IsReply">
                        <option value="1">允许</option>
                        <option value="0">不允许</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文章内容</label>
                <div class="layui-input-block">
                    <div id="editor"></div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文章资源</label>
                <div class="layui-input-block">
                    <table class="layui-table">
                        <colgroup>
                            <col width="100">
                            <col width="150">
                            <col width="200">
                            <col width="150">
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>来源</th>
                                <th>名称</th>
                                <th>地址</th>
                                <th>密码</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="resList"></tbody>
                        <thead>
                            <tr>
                                <th colspan="5">添加资源</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="p0i">
                                    <select class="display-form-select" id="resEditSource" style="height:49px;border:0;">
                                        <option value="其他资源">其他资源</option>
                                        <option value="百度网盘">百度网盘</option>
                                        <option value="腾讯微云">腾讯微云</option>
                                        <option value="微博微盘">微博微盘</option>
                                    </select>
                                </td>
                                <td class="p0i">
                                    <input type="text" id="resEditName" placeholder="请输入资源名称" class="layui-input" style="height:49px;border:0;">
                                </td>
                                <td class="p0i">
                                    <input type="text" id="resEditUrl" placeholder="请输入来源地址" class="layui-input" style="height:49px;border:0;">
                                </td>
                                <td class="p0i">
                                    <input type="text" id="resEditPwd" placeholder="如存在密码请输入" class="layui-input" style="height:49px;border:0;">
                                </td>
                                <td>
                                    <a href="javascript:void(0)" class="layui-btn layui-btn-sm layui-btn-normal" onclick="javascript: { article.addRes(); }">添加资源</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-form-item pt30">
                <div class="layui-input-block">
                    <a href="javascript:void(0)" class="layui-btn layui-btn-normal" onclick="javascript: { article.submit(); }">保存</a>
                    <a href="javascript:void(0)" class="layui-btn layui-btn-normal" onclick="javascript: { article.submitDraft(true); }">保存草稿</a>
                    <a href="/Member/Article@(ViewBag.Suffix)" class="layui-btn layui-btn-primary">取消</a>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    var editor = new window.wangEditor('#editor');
    editor.customConfig.uploadImgServer = '/Base/WangEditorUpload';
    editor.customConfig.uploadImgMaxSize = 1024 * 1024;
    editor.customConfig.uploadImgMaxLength = 2;
    editor.customConfig.customAlert = function (info) {
        layer.msg(info);
    }
    editor.create();

    var article = new Article();
    $(function () {
        article.paras.articleId = $('#ID').val();
        article.initClassify();

        setInterval(article.submitDraft, 300000);
    });

    function Article() {
        this.paras = {
            articleId: null
        };
        this.addRes = function () {
            var res = {};
            res.Source = $('#resEditSource').val();
            res.Name = $('#resEditName').val();
            res.Url = $('#resEditUrl').val();
            res.Password = $('#resEditPwd').val();
            if (!res.Name) {
                layer.msg('资源名称不能为空');
                return;
            }
            if (!res.Url) {
                layer.msg('来源地址不能为空');
                return;
            }
            this.pushRes(res);
        };
        this.pushRes = function (res) {
            var _trHtml = '<tr data-source="' + res.Source + '" data-name="' + res.Name + '" data-url="' + res.Url + '" data-password="' + res.Password + '">' +
                '<td>' + res.Source + '</td>' +
                '<td>' + res.Name + '</td> ' +
                '<td>' + res.Url + '</td>' +
                '<td>' + res.Password + '</td>' +
                '<td>' +
                '<a href = "javascript:void(0)" class="layui-btn layui-btn-sm layui-btn-danger" onclick = "javascript: { $(this).parent().parent().remove(); }"> 删除资源</a> ' +
                '</td> ' +
                '</tr>';
            $('#resList').append(_trHtml);
        };
        this.initClassify = function () {
            $.post('/home/GetClassifyResult', {}, function (result) {
                $(result.data).each(function (idx, elm) {
                    var _opHtml = '<option value="' + elm.ID + '">' + elm.Name + '</option>';
                    $('#ClassifyID').append(_opHtml);
                });
                if (article.paras.articleId) {
                    article.initArticle();
                }
            });

        };
        this.initArticle = function () {
            $.post('/member/GetMemberArticleResult', this.paras, function (result) {
                $('#dataForm').setForm(result.data);
                $('#IsReply').val(result.data.IsReply ? 1 : 0);
                $('#resEditSource').val('其他资源');
                $('#imgDisplay').attr('src', fileurl + result.data.Img);
                editor.txt.html(result.data.Content);
                if (result.data.Resources.length > 0) {
                    $(result.data.Resources).each(function (idx, elm) {
                        article.pushRes(elm);
                    });
                }
            });
        };
        this.submitDraft = function (save) {
            var model = $('#dataForm').getForm();
            model.Content = editor.txt.html();

            if (!model.Title) {
                if (save) {
                    layer.msg("文章标题不能为空");
                }
                return;
            }
            if (!model.Content) {
                if (save) {
                    layer.msg("文章内容不能为空");
                }
                return;
            }

            if (parseInt(model.IsReply)) model.IsReply = true;
            else model.IsReply = false;
            var resList = $('#resList').find('tr');
            var resJson = [];
            $(resList).each(function (idx, elm) {
                var res = {};
                res.Source = $(elm).data('source');
                res.Name = $(elm).data('name');
                res.Url = $(elm).data('url');
                res.Password = $(elm).data('password');
                resJson.push(res);
            });
            var paras = { model, resJson: JSON.stringify(resJson) };
            console.log(paras);
            $.post('/member/UserEditArticleDraftResult', paras, function (result) {
                $('#ID').val(result.data);
                if (save) {
                    layer.msg('已保存草稿');
                } else {
                    layer.msg('已自动保存草稿');
                }
            });
        };
        this.submit = function () {
            var model = $('#dataForm').getForm();
            model.Content = editor.txt.html();

            if (!model.Title) {
                layer.msg('文章标题不能为空');
                return;
            }
            if (!model.Content) {
                layer.msg('文章内容不能为空');
                return;
            }

            if (parseInt(model.IsReply)) model.IsReply = true;
            else model.IsReply = false;
            var resList = $('#resList').find('tr');
            var resJson = [];
            $(resList).each(function (idx, elm) {
                var res = {};
                res.Source = $(elm).data('source');
                res.Name = $(elm).data('name');
                res.Url = $(elm).data('url');
                res.Password = $(elm).data('password');
                resJson.push(res);
            });
            var paras = { model, resJson: JSON.stringify(resJson) };
            console.log(paras);
            $.post('/member/UserEditArticleResult', paras, function (result) {
                layer.confirm('保存成功', {
                    closeBtn: 0,
                    btn: ['确定']
                }, function () {
                    window.parent.parent.location = '/member/article';
                });
            });
        };
    };

    var cover_win = null, cover_data = null;
    function open_cover() {
        cover_data = null;
        cover_win = layer.open({
            type: 2,
            title: '编辑封面',
            shadeClose: true,
            shade: 0.8,
            area: ['462px', '750px'],
            content: '/Home/Cover'
        });
    };

    function save_cover() {
        var paras = { base64: cover_data };
        $('#imgDisplay').attr('src', cover_data);
        $.post('/base/FileUpload', paras, function (result) {
            $('#Img').val(result.data);
        });
        layer.close(cover_win);
    };

    function close_cover() {
        layer.close(cover_win);
    };
</script>